import { useVideo } from "@reflexjs/gatsby-theme-video"

export const Videos = () => {
  const videos = useVideo()
  return videos.length ? (
    <Container maxW="900px" my="10|10|20">
      {videos &&
        videos.map((video, index) => (
          <VideoTeaser key={index} video={video} mb="10" />
        ))}
    </Container>
  ) : null
}

export const VideoTeaser = ({ video, ...props }) => {
  const { title, slug, excerpt, thumbnail, date, datetime, data } = video
  return (
    <article position="relative" {...props}>
      <Grid col="1|1|350px 1fr" gap="4|4|10" alignItems="flex-start">
        {thumbnail && (
          <Link href={slug} display="block" position="relative">
            {data.duration && (
              <span
                color="white"
                bg="primary"
                rounded="md"
                bottom="4"
                right="4"
                zIndex="100"
                px="2"
                py="1"
                fontSize="sm"
                position="absolute"
              >
                {data.duration}
              </span>
            )}
            <Image
              src={thumbnail}
              title={title}
              alt={title}
              aspectRatio={16 / 9}
              rounded="lg"
              overflow="hidden"
              w="full"
            />
          </Link>
        )}
        <div py="2">
          {title && (
            <Link href={slug}>
              <h2
                variant="heading.h2"
                my="0"
                fontSize="3xl"
                _hover={{
                  color: "primary",
                }}
              >
                {title}
              </h2>
            </Link>
          )}
          {excerpt && (
            <p mt="2" fontSize="md">
              {excerpt}
            </p>
          )}
          {date && (
            <time dateTime={datetime} fontSize="sm">
              {date}
            </time>
          )}
        </div>
      </Grid>
    </article>
  )
}
